<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="LoveTail">
import axios from 'axios';
import { nanoid } from 'nanoid';  //随机生成不重复字符串
import { reactive } from 'vue';
import {useTalkStore} from '@/store/talk.ts'
import { storeToRefs } from 'pinia';

const talkStore = useTalkStore()
// console.log(talkStore.talkList);
const {talkList} = storeToRefs(talkStore)

async function getLoveTalk(){
  // 发请求
  let result = await axios.get('https://api.yyy001.com/api/quote')
  console.log(result.data.zh);
  // 放进情话数组
  let obj = {id:nanoid(),title:result.data.zh}
  talkStore.talkList.unshift(obj)
}
</script>

<style scoped>
.talk{
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  width: 700px;
}
button{
  width: 150px;
}
</style>